$(function() {
    var $banner = $("#banner");
    //banner image
    var $banner_canvas = $banner.find(".banner_banner");
    var $banner_images = $banner_canvas.find(".banner_banner_image");
    //create nav dots
    var $banner_dots = $(function(argument) {
        var result = "";
        var banner_dots_html = "<div class='banner_banner_dots_item' data-index=__INDEX__></div>";
        $banner_images.each(function(i) {
            result += banner_dots_html.replace("__INDEX__", i);
        });
        return "<div class='banner_banner_dots'>" + result + "</div>";
    }());
    //append dots
    $banner_canvas.append($banner_dots);
    //register banner event
    var currentIndex = 0;
    var banner_canvas_ti = null;
    $banner_dots.on("mouseenter",".banner_banner_dots_item", function(e) {
        var self = $(this);
        var index = self.data("index");
        currentIndex = index;
        $banner_images.each(function(i, ele) {
            var $ele = $(ele);
            if (i === index) {
                $ele.css({
                    zIndex: 2
                }).stop().animate({
                    opacity: 1
                }, 200);
            } else {
                $ele.css({
                    zIndex: 1
                }).stop().animate({
                    opacity: 0
                }, 200);
            }
        });

        //banner auto animte
        clearInterval(banner_canvas_ti);
        banner_canvas_ti = setInterval(function () {
            $($banner_dots.find(".banner_banner_dots_item")[++currentIndex%$banner_images.length]).mouseenter();
        },2000);//2s
        
    });
    //focus in first image
    $banner_dots.find(".banner_banner_dots_item").first().mouseenter();
    
    //banner notice
    var $banner_notice = $banner.find(".banner_notice");
});
